<!DOCTYPE html>
<html>
<head>
    <% include ../common/meta.ejs %>
    <% include ../common/public.ejs %>
    <style>
        .text-label {
            vertical-align: bottom;
            line-height: 15px;
        }
        .input-group-addon {
            padding: 5px 12px;
        }
    </style>
</head>
<body>
<% include ../common/header.ejs %>
<div class="container">

    <input type="hidden" id="fromFlag" value="<%= data.fromFlag %>" />
    <div class="dolphin-row main page-content">
        <div class="page-header">
            <h5 class="content-title">会员账单</h5>
            <div class="pull-left">
                <ul class="fl">
                    <li>
                        <button class="btn btn-block btn-info newData"><i class="fui-plus-circle icon-menu"></i>
                            <span>新建临时账单</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="queryCondition">
            <form class="query-form">
                <div class="row">
                    <div class="col-md-6">
                        <label class="col-md-2" style="width:100px;margin-left: -20px" >支付时间 :</label>
                        <div class="col-md-4">
                            <div class="input-group date dolphin_date_picker">
                                <input class="form-control" type="text" name="_startDate" id="_startDate">
                                <span class="input-group-addon" >
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group date dolphin_date_picker">
                                <input class="form-control" type="text" name="_endDate" id="_endDate">
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label>房屋名称：</label>
                        <input type="text" placeholder="编码模糊查询" name="house_name_obj_like_ae">
                    </div>
                    <div class="col-md-3">
                        <label>账单类型：</label>
                        <select name="type">
                            <option value="">--请选择--</option>
                            <option value="2">水电气账单</option>
                            <option value="1">合同账单</option>
                            <option value="3">报修账单</option>
                            <option value="4">保洁账单</option>
                            <option value="5">其他账单</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label class="col-md-2" style="width:100px;margin-left: -20px" >生成时间 :</label>
                        <div class="col-md-4">
                            <div class="input-group date dolphin_date_picker">
                                <input class="form-control" type="text" name="_startDate_t">
                                <span class="input-group-addon" >
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group date dolphin_date_picker">
                                <input class="form-control" type="text" name="_endDate_t">
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label>合同名称：</label>
                        <input type="text" placeholder="名称模糊查询" name="contract_name_obj_like_ae">
                    </div>
                    <div class="col-md-3">
                        <label>账单状态：</label>
                        <select name="status" id="status" style="width: 120px;">
                            <option value="">--请选择--</option>
                            <option value="0" selected>未支付</option>
                            <option value="1">已支付</option>
                            <option value="2">已作废</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2">
                        <button class="btn btn-sm btn-inverse btn-query" type="button">搜索</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="dataList" class="box-content">
        </div>
    </div>
</div>
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="dataModalLabel">账单支付</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal edit-form">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">账单名称</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" name="name" disabled dol-validate="required" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">账单金额</label>
                        <div class="col-md-8">
                            <input class="form-control" type="number" disabled name="actualAmount">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">实际支付</label>
                        <div class="col-md-8">
                            <input class="form-control" type="number" name="payedAmount">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">支付方式</label>
                        <div class="col-md-8">
                            <select class="form-control" options="payMethod"
                                    codeField="code" nameField="name" name="payMethod" dol-validate="required"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">支付人</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" name="payedPerson">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary modelSave">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="viewDataModal" tabindex="-1" role="dialog" aria-labelledby="viewDataModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="viewDataModalLabel">支付结果</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal view-form">
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">账单名称</label>
                        <div class="col-md-8">
                            <span class="text-label" name="name"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">账单金额</label>
                        <div class="col-md-8">
                            <span class="text-label" name="actualAmount"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">实际支付</label>
                        <div class="col-md-8">
                            <span class="text-label" name="payedAmount"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">支付方式</label>
                        <div class="col-md-8">
                            <span class="text-label" name="payMethod"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">支付人</label>
                        <div class="col-md-8">
                            <span class="text-label" name="payedPerson"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-2 control-label">支付时间</label>
                        <div class="col-md-8">
                            <span class="text-label" name="payedDate"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<!--新增临时账单-->
<div class="modal fade" id="dataModalAdd" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel">
    <div class="modal-dialog" role="document" style="top: 0">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <span class="modal-title">新增临时账单</span>
            </div>
            <div class="modal-body">
                <form class="form-horizontal edit-form-add">
                    <input type="hidden" class="form-control" name="id">
                    <input type="hidden" id="houseId" name="house.id">
                    <input type="hidden" id="userId" name="user.id">

                    <div class="form-group">
                        <label class="col-md-2 control-label">客户信息</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" name="contactName" id="contactName"
                                       dol-validate="required" readonly>
                                <span class="input-group-addon" id="selectUser">
                                        <i class="glyphicon glyphicon-search"></i>
                                </span>
                            </div>
                        </div>
                        <label class="col-md-2 control-label">客户手机</label>
                        <div class="col-md-4">
                            <input class="form-control" id="contactMobile" name="contactMobile" disabled type="text"
                                   dol-validate="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">房屋信息</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control orderRelStr" name="houseName" id="houseName"
                                       dol-validate="required" readonly>
                                <span class="input-group-addon" id="selectHouse" >
                                        <i class="glyphicon glyphicon-search"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">账单类型</label>
                        <div class="col-md-8">
                            <select name="type">
                                <option value="">--请选择--</option>
                                <option value="2">水电气账单</option>
                                <option value="1">合同账单</option>
                                <option value="3">报修账单</option>
                                <option value="4">保洁账单</option>
                                <option value="5">其他账单</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">金额</label>
                        <div class="col-md-8">
                            <input type="number" name="totalAmount">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">描述</label>
                        <div class="col-md-8">
                           <input type="text" name="remark">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary orderSave">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--显示客户-->
<div class="modal fade" id="userDetailModal" tabindex="-1" role="dialog" aria-labelledby="userDetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="dataModalLabel">客户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal user-edit-form">
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">姓名</label>
                        <div class="col-md-6">
                            <span id="username"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">编码</label>
                        <div class="col-md-6">
                            <span id="usercode"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">身份证照片</label>
                        <input id="icFrontImg" name="icFrontImg" type="hidden" value=""/>
                        <input id="icBackImg" name="icBackImg" type="hidden" value=""/>
                        <div class="col-md-6">
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small fjs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div class="add-image js-btn-add">
                                                <img style="width : 100px ; height : 80px ;" id="usericFrontImg" src=""/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small bjs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div  class="add-image js-btn-add">
                                                <img style="width : 100px ; height : 80px ;" id="usericBackImg" src=""/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">身份证号码</label>
                        <div class="col-md-6">
                            <span id="useridCard"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">头像</label>
                        <input id="avatarImg" name="avatarImg" type="hidden" value=""/>
                        <div class="col-md-6">
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small ajs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div class="add-image js-btn-add">
                                                <img style="width : 100px ; height : 80px ;" id="useravatarImg" src=""/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">手机号码</label>
                        <div class="col-md-6">
                            <span id="userphone"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">推荐人会员号</label>
                        <div class="col-md-6">
                            <span id="userintroducer"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">会员状态</label>
                        <div class="col-md-6">
                            <span id="userstatus"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">人员性别</label>
                        <div class="col-md-6">
                            <span id="usersex"></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--用户选择器-->
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel">
    <div class="modal-dialog" role="document" style="left: 12%;top: 0;width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <span class="modal-title">用户选择器</span>
            </div>
            <div class="modal-body">
                <div class="queryCondition">
                    <form class="query-user-form">
                        <div class="row">
                            <div class="col-md-10">
                                <label>用户姓名：</label>
                                <input type="text" placeholder="支持模糊查询" name="name_like">
                                <label>联系方式：</label>
                                <input type="text" placeholder="支持模糊查询" name="phone_like">
                                <button class="btn btn-sm btn-inverse btn-query" id="queryUser" type="button">查询</button>
                            </div>

                        </div>
                    </form>
                </div>
                <div id="userList" class="box-content"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary confirmUser">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--房屋选择器-->
<div class="modal fade" id="houseModal" tabindex="-1" role="dialog" aria-labelledby="houseModalLabel">
    <div class="modal-dialog" role="document" style="left: 12%;top: 0;width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <span class="modal-title">房屋选择器</span>
            </div>
            <div class="modal-body">
                <div class="queryCondition">
                    <form class="query-house-form">
                        <div class="row">
                            <div class="col-md-10">
                                <label>房屋名称：</label>
                                <input type="text" placeholder="支持模糊查询" name="name_like">
                                <button class="btn btn-sm btn-inverse btn-query" id="queryHouse" type="button">查询</button>
                            </div>

                        </div>
                    </form>
                </div>
                <div id="houseList" class="box-content"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary confirmHouse">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>



<% include ../common/footer.ejs %>
</body>
</html>
